<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
	<div class="main">
		<div class="movieBan">
			<ul class="mvList" id="movie">
				<li>
					<a class="selected" href="javascript:;"><img src="../images/1.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="../images/2.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="../images/3.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="../images/1.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="../images/2.jpg"></a>
				</li>
				<li>
					<a href="javascript:;"><img src="../images/3.jpg"></a>
				</li>
			</ul>
		</div>
	</div>
	<script src="../js/jquery-1.8.3.min.js"></script>
	<script src="../js/flexible.js"></script>
	<script src="../js/touch-0.2.14.min.js"></script>
	<script>
		(function(){
			var movie = document.getElementById('movie'), ml, i, w, n;
			var $li = $('.mvList>li');
			touch.on('#movie', 'dragstart', function(ev){
				ml = $('.mvList').css('margin-left');
				n = $li.size();
			});

			touch.on('#movie', 'touchmove', function(ev){
				ev.preventDefault();
			});

			touch.on('#movie', 'drag', function(ev){
				w = $li.width();
				i = Math.round((parseInt(ml) + ev.x) / w);
				var left = parseInt(ml) + ev.x;
				if(left > 0){
					i = 0;
					left = left * 0.5;
				}
				if(left < -w * (n - 1)){
					i = 1 - n;
					left = -w * (n - 1) + (ev.x - (-w * (n - 1) - parseInt(ml))) * 0.5;
				}

				$('.mvList').css('margin-left', left);
			});
			touch.on('#movie', 'dragend', function(ev){
				var index = Math.abs(i);
				$('.mvList').animate({'margin-left': i * w}, 150);
				$('.mvList>li>a').removeClass('selected').eq(index).addClass('selected');
			});
		})();

		$(function(){
			var $li = $('.mvList>li');
			var w = $li.width();
			var n = $li.size();
			$('.mvList').width(w * n + 1);

			$li.click(function(){
				var index = $(this).index();
				$(this).parent().animate({'margin-left': -w * index}, 150);
				$('.mvList>li>a').removeClass('selected');
				$(this).children().addClass('selected');
			});
		});
	</script>
</body>
</html>